<template>
  <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="review-item">
    <div class="review-item-content">
      <div class="review-item-title">
        <div class="review-item-left">评分及评论</div>
      </div>
      <div class="review-item-mark">
        <div class="review-item-mark-left">
          <div class="review-item-mark-number">4.7</div>
          <div class="review-item-mark-item">
            <div style="font-weight: bold">满分5分</div>
            <div>500个评分</div>
          </div>
        </div>
        <div class="comment-on">
          <div class="comment-on-left">轻点评分</div>
          <div><van-rate v-model="value" color="#007AFF" size="22" /></div>
        </div>
        <div class="comment-on" style="color: #007aff">
          <div class="comment-on-left"><i class="iconfont icon-bianxie"></i>评论</div>
          <div class="comment-on-left">
            <van-icon name="question-o" class="question-o" />APP支持
          </div>
        </div>
        <div class="comment-on" style="color: #007aff">
          <div class="comment-on-left"></div>
          <div>按最有帮助排序<van-icon name="arrow-down" style="margin-left: 4px" /></div>
        </div>
        <div class="write-review"></div>
        <div class="review-item-list" v-for="(item, index) in list" :key="index">
          <div class="review-item-box">
            <div class="review-item-box-left">
              <div class="review-title">想了下还是留个记号吧</div>
              <!-- <div>123</div> -->
            </div>
            <div class="review-item-box-right">
              <div>10月8日</div>
              <div style="margin-top: 4px">
                <div>起航在风起时</div>
              </div>
            </div>
          </div>
          <div class="review-contend">
            2020年入坑2020年入坑2020年入坑2020年入坑2020年入坑2020年入坑2020年入坑
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(3)
const list = ref([1, 2, 3])
const onClickLeft = () => history.back()
</script>

<style lang="scss" scoped>
.review-item-content {
  padding: 20px 0;
}
.review-item-title {
  display: flex;
  justify-content: space-between;
  .review-item-left {
    font-weight: bold;
    font-size: 18px;
  }
  .review-item-right {
    color: #1989fa;
    font-size: 16px;
  }
}
.review-item-mark {
  .review-item-mark-left {
    margin: 8px 0;
    border-bottom: 1px solid #c6c6c8;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
  .comment-on {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 16px;
    color: #b8b8b8;
    align-items: center;
    .comment-on-left {
      display: flex;
      align-items: center;
    }
  }
  .question-o {
    margin-right: 2px;
    font-size: 19px;
  }
  .write-review {
    display: flex;
    align-items: center;
  }

  .review-item-mark-number {
    font-weight: bold;
    font-size: 40px;
  }
  .review-item-mark-item {
    margin-left: 4px;
    margin-top: 4px;
    display: flex;
    color: #8e8e93;
    justify-content: space-between;
  }
}
.review-item-list {
  background: #f2f2f7;
  padding: 10px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  .review-item-box {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
    .review-item-box-left {
      font-weight: bold;
    }
    .review-item-box-right {
      color: #8e8e93;
      font-size: 12px;
    }
  }
  .review-contend {
    margin-top: 10px;
  }
}
.icon-bianxie {
  color: #007aff;
  font-size: 26px;
}
.review-item {
  padding: 0 14px;
}
</style>
